<template>
  <div class="user">
    <t-row :gutter="[16, 16]">
      <t-col :span="8">
        <div class="card_title">
          <div>
            <p class="title">{{ title }}</p>
          </div>
          <img src="../../assets/images/1.png" alt="" srcset="" />
        </div>
        <t-card title="个人信息" class="card_content">
          <t-row :gutter="[16, 24]">
            <t-col
              :span="3"
              v-for="(item, index) in userinfo"
              :key="index"
              class="col"
            >
              <span class="label">{{ item.label }}</span>
              <span class="content">{{ item.content }}</span>
            </t-col>
          </t-row>
        </t-card>
        <t-card class="card_echarts">
          <t-tabs v-model="value">
            <!-- 默认插槽 和 具名插槽（panel）都是用来渲染面板内容 -->
            <t-tab-panel value="first" label="全部通知" :destroyOnHide="false">
              <t-list split>
                <t-list-item
                  v-for="(item, index) in noticelISTView"
                  :key="index"
                  class="listItem"
                >
                  <t-tag :theme="item.type == '已读' ? 'success' : 'warning'">{{
                    item.type
                  }}</t-tag>
                  <span
                    :style="
                      item.type == '已读'
                        ? { marginLeft: '15px', color: '#ccc' }
                        : { marginLeft: '15px' }
                    "
                    >{{ item.name }}</span
                  >
                  <span class="right">
                    <t-tooltip content="删除通知">
                      <span @click="deleteNotice(item.id)">
                        <icon-font
                          name="delete"
                          style="color: white"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                    <t-tooltip
                      :content="item.type === '已读' ? '设为未读' : '设为已读'"
                    >
                      <span @click="changeType(item.id)">
                        <icon-font
                          name="bulletpoint"
                          style="color: white; marginleft: 10px"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                  </span>
                </t-list-item>
              </t-list>
            </t-tab-panel>
            <t-tab-panel value="second" label="已读通知" :destroyOnHide="false">
              <t-list split>
                <t-list-item
                  v-for="(item, index) in readList"
                  :key="index"
                  class="listItem"
                >
                  <t-tag theme="success">{{ item.type }}</t-tag>
                  <span :style="{ color: '#ccc', marginLeft: '15px' }">{{
                    item.name
                  }}</span>
                  <span class="right">
                    <t-tooltip content="删除通知">
                      <span @click="deleteNotice(item.id)">
                        <icon-font
                          name="delete"
                          style="color: white"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                    <t-tooltip
                      :content="item.type === '已读' ? '设为未读' : '设为已读'"
                    >
                      <span @click="changeType(item.id)">
                        <icon-font
                          name="bulletpoint"
                          style="color: white; marginleft: 10px"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                  </span>
                </t-list-item>
              </t-list>
            </t-tab-panel>
            <t-tab-panel value="third" label="未读通知">
              <t-list split>
                <t-list-item
                  v-for="(item, index) in otherList"
                  :key="index"
                  class="listItem"
                >
                  <t-tag theme="warning">{{ item.type }}</t-tag>
                  <span :style="{ marginLeft: '15px' }">{{ item.name }}</span>
                  <span class="right">
                    <t-tooltip content="删除通知">
                      <span @click="deleteNotice(item.id)">
                        <icon-font
                          name="delete"
                          style="color: white"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                    <t-tooltip
                      :content="item.type === '已读' ? '设为未读' : '设为已读'"
                    >
                      <span @click="changeType(item.id)">
                        <icon-font
                          name="bulletpoint"
                          style="color: white; marginleft: 10px"
                          size="22px"
                        />
                      </span>
                    </t-tooltip>
                  </span>
                </t-list-item>
              </t-list>
            </t-tab-panel>
          </t-tabs>
        </t-card>
      </t-col>
      <t-col :span="4">
        <t-card class="card">
          <div class="card_right">
            <t-avatar size="90px">T</t-avatar>
            <span class="span1">My Acount</span>
            <span class="span2">XXG 港澳业务拓展组员工 直客销售</span>
          </div>
        </t-card>
        <t-card title="团队成员">
          <div class="teamItem" v-for="(item, index) in teamItem" :key="index">
            <div class="left">
              <t-avatar :image="item.avrate" size="60px" />
            </div>
            <div class="right">
              <span class="name">{{ item.name }}</span>
              <span class="job">{{ item.job }}</span>
            </div>
          </div>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
export default {
  components: {
    IconFont,
  },
  mounted() {
    this.noticelISTView = this.noticelIST;
  },
  data() {
    return {
      title: "Hi,user,这是你加入CSS的第100天~",
      userinfo: [
        {
          label: "手机",
          content: "+86 13923734567",
        },
        {
          label: "座机",
          content: "734567",
        },
        {
          label: "办公室邮箱",
          content: "Account@qq.com",
        },
        {
          label: "座位",
          content: "T32F 012",
        },
        {
          label: "管理主体",
          content: "中国软件",
        },
        {
          label: "直属上级",
          content: "Michael Wang",
        },
        {
          label: "职位",
          content: "高级 UI 设计师",
        },
        {
          label: "入职时间",
          content: "2021-07-01",
        },
        {
          label: "直属团队",
          content: "xxx/xxx/xxx/xxx/xxx/xxx/xx/xxxxxx/xxxxxx",
        },
      ],
      teamItem: [
        {
          avrate: "https://tdesign.gtimg.com/site/avatar.jpg",
          name: "Lovellzhong 钟某某",
          job: "直客销售 港澳拓展组员工",
        },
        {
          avrate: "https://tdesign.gtimg.com/site/avatar.jpg",
          name: "Jiajingwang 彭某某",
          job: "前端开发 前台研发组员工",
        },
        {
          avrate: "https://tdesign.gtimg.com/site/avatar.jpg",
          name: "cruisezhang 林某某",
          job: "技术产品 产品组员工",
        },
        {
          avrate: "https://tdesign.gtimg.com/site/avatar.jpg",
          name: "Lovellzhang 商某某",
          job: "产品运营 港澳拓展组员工",
        },
        {
          avrate: "https://tdesign.gtimg.com/site/avatar.jpg",
          name: "Lovellzhong 钟某某",
          job: "直客销售 港澳拓展组员工",
        },
      ],
      value: "first",
      noticelISTView: [],
      noticelIST: [
        {
          id: Math.floor(Math.random() * 3000),
          type: "已读",
          name: "腾讯大厦一楼改造施工项目 已通过审核！",
        },
        {
          id: Math.floor(Math.random() * 3000),
          type: "已读",
          name: "三季度生产原材料采购项目 开票成功！",
        },
        {
          id: Math.floor(Math.random() * 3000),
          type: "未读",
          name: "2021-01-01 10:00的【国家电网线下签约】会议即将开始，请提前10分钟前往 会议室1 进行签到！",
        },
        {
          id: Math.floor(Math.random() * 3000),
          type: "已读",
          name: " 一季度生产原材料采购项目 开票成功！",
        },
        {
          id: Math.floor(Math.random() * 3000),
          type: "已读",
          name: "二季度生产原材料采购项目 开票成功！",
        },
        {
          id: Math.floor(Math.random() * 3000),
          type: "未读",
          name: " 三季度生产原材料采购项目 开票成功！",
        },
      ],
      visibleCenter: false,
    };
  },
  computed: {
    readList() {
      return this.noticelISTView.filter((item) => item.type === "已读");
    },
    otherList() {
      return this.noticelISTView.filter((item) => item.type !== "已读");
    },
  },
  methods: {
    changeType(id) {
      this.noticelIST.find((item, index) => {
        if (item.id === id) {
          if (item.type === "已读") {
            this.noticelIST[index].type = "未读";
          } else {
            this.noticelIST[index].type = "已读";
          }
        }
      });
    },
    deleteNotice(id) {
      this.noticelIST.find((item, index) => {
        if (item.id === id) {
          this.noticelIST.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card_title {
  background-color: #fff;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .title {
    font-size: 20px;
  }
}
.card_content {
  margin-top: 20px;
  .col {
    display: flex;
    flex-direction: column;
    .label {
      color: #ccc;
      letter-spacing: 5px;
      margin-bottom: 20px;
    }
    .content {
      color: rgb(112, 111, 111);
    }
  }
}
.card {
  background-color: blueviolet;
  margin-bottom: 20px;
}
.card_right {
  display: flex;
  flex-direction: column;
  align-items: right;
  padding: 40px;
  .span1 {
    margin-top: 25px;
    font-size: 30px;
    color: #fff;
  }
  .span2 {
    margin-top: 15px;
    color: #fff;
    letter-spacing: 2px;
  }
}
.teamItem {
  display: flex;
  padding: 10px 0;
  align-items: center;
  .right {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    .name {
      font-weight: 900;
      margin-bottom: 10px;
      font-size: 20px;
    }
  }
}
.card_echarts {
  margin-top: 20px;
  min-height: 375px;
  .listItem {
    position: relative;
    cursor: pointer;
    .right {
      position: absolute;
      right: 5px;
    }
  }
  .listItem:hover {
    background-color: rgba(204, 204, 204, 0.5);
  }
}
</style>
